<template>
  <el-container class="top">
    <el-header>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="设备编号：">
          <el-input v-model="form.value" placeholder="请输入" size="medium" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"><i class="el-icon-search" style="margin-right:5px" />查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column
          label="序号"
          width="100px"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index+(queryObj.pageIndex - 1) * queryObj.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="innerCode"
          label="设备编号"
        />
        <el-table-column
          prop="type.name"
          label="设备型号"
          show-overflow-tooltip
        />
        <el-table-column
          prop="node.name"
          label="详细地址"
        />
        <el-table-column
          prop="name"
          label="运营状态"
        >
          <template #default="{row}">
            <span>{{ row.vmStatus===0?'未投放':row.vmStatus===1?'运营':'撤机' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="设备状态"
          show-overflow-tooltip
        >
          <el-row>
            <el-button type="warning" round size="mini">离线</el-button>
            <el-button type="success" round size="mini">货道</el-button>
            <el-button type="success" round size="mini">传动轴</el-button>
          </el-row>
        </el-table-column>
        <el-table-column
          label="操作"
          show-overflow-tooltip
        >
          <template #default="{row}">
            <el-button type="text" @click="detail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗 -->
      <el-dialog
        title="设备详情"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <div class="dialogInfo">
          <p>销售量: <span>{{ count }}个</span> </p>
          <p>销售额:<span>{{ orderAmount }}元</span> </p>
          <p>补货次数:<span>0次</span> </p>
          <p>维修次数:<span>0次</span> </p>
        </div>
        <p>商品销量（月）</p>
        <div v-if="list.length" class="goods">
          <span v-for="item in list" :key="item.skuName">{{ item.skuName }}:{{ item.count }}</span>
        </div>
        <div v-else class="good">当前设备未销售商品</div>
      </el-dialog>

    </el-main>
    <!-- 分页 -->
    <PageTool
      class="foot"
      :info="queryObj"
      @handleCurrentChange="handleCurrentChange"
    />
  </el-container>
</template>

<script>
import { getList } from '@/api/equipment'
import { getSkuCollect, getOrderAmount } from '@/api/status'
import { getTime, getMonth1 } from '@/utils/date'
import PageTool from '../components/page-tool.vue'
export default {
  name: 'Status',
  components: {
    PageTool
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        value: ''
      },
      tableData: [],
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 10,
        totalPage: 10,
        innerCode: ''
      },
      start: '2023-06-01',
      end: '2023-06-13',
      list: [],
      count: '',
      startTime: '2023-06-01+00:00:00',
      endTime: '2023-06-13+23:59:59',
      orderAmount: ''
    }
  },
  created() {
    this.getManagementList()
  },
  methods: {
    async getManagementList() {
      const data = await getList(this.queryObj)
      this.tableData = data.currentPageRecords
      this.queryObj.pageIndex = data.pageIndex
      this.queryObj.pageSize = data.pageSize
      this.queryObj.totalCount = data.totalCount
      this.queryObj.totalPage = data.totalPage
    },
    handleCurrentChange(val) {
      this.queryObj.pageIndex = val
      this.getManagementList()
    },
    onSubmit() {
      this.queryObj.innerCode = this.form.value
      this.getManagementList()
    },
    async detail(row) {
      const date = getTime()
      this.start = date[1][0]
      this.end = date[1][1]
      const data = await getSkuCollect(row.innerCode, this.start, this.end)
      this.list = data
      this.count = this.list.reduce((prve, item) => {
        return prve + item.count
      }, 0)
      const res2 = getMonth1()
      this.startTime = res2.start
      this.endTime = res2.end
      const res = await getOrderAmount(this.startTime, this.endTime, row.innerCode)
      this.orderAmount = res
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang='less'>
.top{
  margin-top: 70px;
}
 .dialogInfo {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  span {
    color: #7a99fe;
  }
}
/deep/ .goods {
 span {
  display: inline-block;
   border: 1px solid #333;
   width: 170px;
   height: 50px;
   line-height: 50px;
   text-align: center;
 }
}
/deep/  .good {
  margin-left: 200px;
}
</style>
